import React, { useEffect, useState } from 'react';
import { Divider } from 'antd';
import { ProColumns, EditableProTable } from '@ant-design/pro-table';

const CustomerInfo: React.FC<any> = (props) => {
  const { detail } = props
  const [list, setList] = useState<any>([])
  const columns: ProColumns<any>[] = [
    {
      title: '收货人',
      dataIndex: 'receiver'
    },
    {
      title: '手机号码',
      dataIndex: 'receiver_mobile'
    },
    {
      title: '收货地址',
      dataIndex: 'receiver_address'
    },
    {
      title: '快递公司',
      dataIndex: 'mail_name'
    },
    {
      title: '物流单号',
      dataIndex: 'mail_no'
    }
  ];

  useEffect(() => {
    if (detail.order_id) {
      const item = {
        order_id: detail.order_id,
        receiver: detail.receiver,
        receiver_mobile: detail.receiver_mobile,
        receiver_address: detail.receiver_address,
        mail_name: detail.mail_name,
        mail_no: detail.mail_no,
        pay_status: detail.pay_status,
        order_status: detail.order_status
      }
      setList([item])
    }
  }, [detail])

  return <div className="service-record">
     <div className="header">
        <div className="title">3. 收货人及物流信息</div>
      </div>

      <Divider style={{margin: '10px 0 0'}} />
      
      <EditableProTable<any> 
        bordered 
        rowKey="order_id"
        options={false}
        search={false}
        recordCreatorProps={false}
        value={list}
        onChange={setList}
        dataSource={list}
        columns={columns} />
  </div>
}

export default CustomerInfo;